<template>
  <div class="operate justify-between align-center">
    <div class="operate-title flex-center">
      <n-icon size="16">
        <ReorderFourOutline />
      </n-icon>
      <span>列表</span>
    </div>
    <div class="operate-search flex1">
      <div class="align-center">
        <n-icon size="20" class="mr-12">
          <Search />
        </n-icon>
        <n-input v-model:value="filterText" type="text" placeholder="搜索.." class="mr-16" />
        <n-tag :color="{ color: '#f4f7ff' }" :bordered="false" size="large">
          <template #icon>
            <n-icon size="16" color="#999">
              <FunnelOutline />
            </n-icon>
          </template>
          筛选
        </n-tag>
      </div>
    </div>
    <n-space align="center" class="operate-btns">
      <n-button type="primary">
        <template #icon>
          <n-icon size="16">
            <Search />
          </n-icon>
        </template>
        搜索
      </n-button>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
  import { Search, ReorderFourOutline, FunnelOutline } from '@vicons/ionicons5'

  const filterText = ref('')
</script>

<style scoped lang="scss">
  .operate {
    height: 60px;
    background: #fff;
    &-title {
      height: 60px;
      width: 100px;
      border-right: 1px solid $border-color;
    }
    &-search {
      margin: 0 16px;
    }
    &-btns {
      padding: 0 24px;
      height: 100%;
      border-left: 1px solid $border-color;
    }
  }
</style>
